<template>
    <div class="order"
        style="background-color: rgb(241, 241, 241);padding:5px;padding-right: 7px;min-height: 100vh; box-sizing: border-box;">
        <van-nav-bar title="订单详情" left-text="返回" left-arrow fixed @click="back">
        
        </van-nav-bar>
        <div style="height: 40px;"></div>
        <!-- 地址 -->
        <van-address-list v-model="chosenAddressId" :list="addressList" right-icon="" default-tag-text="默认" />
        <!-- 商品 -->
        <van-card v-for="item in orderInfo.goods" :key="item?.goods_id" :num="item?.count" :price="item?.goodsInfo.price?.toFixed(2)" 
        :desc="item?.goodsInfo?.detail_info" :title="item.goodsInfo?.name"
            :thumb="item.goodsInfo?.pic_url" style="border-radius: 10px;"/>
            <div style="height: 160px;"></div>
       <!-- 付款 -->
            <van-submit-bar :price="orderInfo.price*100" button-text="立即付款" @submit="onSubmit" >
                <template #top>
                    <!-- 备注 -->
                <van-field v-model.trim="remark" type="textarea" lavel="备注" rows="2" placeholder="备注" maxlength="50" show-word-limit
                :rules="[{required:true,message:'请填写备注'}]">
                </van-field>
            </template>
                </van-submit-bar>
        <!-- 弹出框 -->
        <van-action-sheet v-model:show="isShow" :actions="actions" 
        cancel-text="取消" close-onclick-action @select="onSelect" @cancel="onCancel">

        </van-action-sheet>
    </div>
</template>

<script setup>
import { useRoute,useRouter } from 'vue-router'
import { ref,reactive } from 'vue'
import { showConfirmDialog} from 'vant';
import { showSuccessToast, showFailToast } from 'vant';
import {addOrder} from '../../api'


let router = useRouter()
let remark = ref('')
let route = useRoute()
let goodsInfo = ref()
let addressInfo = ref([])
let chosenAddressId = ref(1)
let isShow= ref(false)
let actions = [
    {name:'微信',pay_type:1},
    {name:'支付宝',pay_type:2},
    {name:'云闪付',pay_type:3},
]

//解析订单信息 渲染模版
let orderInfo = ref(
    JSON.parse(decodeURI(atob(route.query.orderInfo)))
)
//console.log(orderInfo)

let addressList = reactive([
    {
        id:orderInfo.value.addressId,
        name:orderInfo.value.consignee_name,
        tel:orderInfo.value.consignee_phone,
        address:orderInfo.value.consignee_address,
        isDefault:orderInfo.value.isDefault
    }
])
chosenAddressId.value=orderInfo.value.addressId

function onSubmit(){
    isShow.value=true
}
//添加订单
function onSelect(item){
    addOrder({
        pay_type:item.pay_type,remark:remark.value,status:2,price:orderInfo.value.price,
        order_goods_infos:orderInfo.value.goods,
        consignee_name:orderInfo.value.consignee_name,
        consignee_phone:orderInfo.value.consignee_phone,
        consignee_address:orderInfo.value.consignee_address,
    }).then(res=>{
        if(res.code==1){
            isShow.value=false
        router.replace('/my-order')
        }
    })
}
//待支付订单
function onCancel(){
    addOrder({
        pay_type:0,remark:remark.value,status:1,price:orderInfo.value.price,
        order_goods_infos:orderInfo.value.goods,
        consignee_name:orderInfo.value.consignee_name,
        consignee_phone:orderInfo.value.consignee_phone,
        consignee_address:orderInfo.value.consignee_address,
    }).then(res=>{
        if(res.code==1){
            isShow.value=false
        router.replace('/my-order')
        }
    })
}
//是否退出订单页面
function back(){
    showConfirmDialog({
  message:
    '退出生成订单？',
    width:'320px',
    confirmButtonColor:'#1BAEAE'
}).then(()=>{
        router.push('/address')
    }).catch(()=>{})
}


</script>

<style scoped>
.van-address-list {
    height: 90px;
    padding: 10px 0;
}
:deep() .van-address-list .van-safe-area-bottom{
    display: none;
}
:deep() .van-nav-bar .van-icon {
    color: #0c9595;
    font-weight: bolder;
}

:deep() .van-nav-bar .van-nav-bar__text {
    color: #1BAEAE;
    font-weight: bolder;
}
:deep() .van-radio__icon--checked .van-icon {
    color: var(--van-white);
    background-color: #1baeae;
    border-color: #1baeae;
}
   :deep() .van-tag--primary {
    background: #1baeae;
}

:deep() .van-button--danger {
    color: var(--van-button-primary-color);
    background: linear-gradient(90deg,#8beded,#159f9f);
   
}
:deep() .van-submit-bar__price{
    color: #1BAEAE;
}
</style>
